<template>
  <div class="blogSys">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>博客文章</span>
        <!-- 日期范围 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="value2"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            align="right"
            @change="sureDate"
          ></el-date-picker>
        </div>
      </div>
      <div class="blogForm">
        <el-table
          :data="blogsData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
        >
          <el-table-column prop="create_time" label="创建日期" sortable width="180"></el-table-column>
          <el-table-column prop="title" label="标题" sortable width="180"></el-table-column>
          <el-table-column prop="id" label="ID" sortable width="180"></el-table-column>
          <el-table-column label="封面" width="180">
            <template slot-scope="scope">
              <img class="blogFace" :src="scope.row.blogface" alt />
            </template>
          </el-table-column>
          <el-table-column prop="state" label="状态" sortable width="180"></el-table-column>
          <el-table-column prop="author" label="作者" sortable width="180"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="pageSizeArr"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getBlogs, delBlog } from "@/api/blog";
export default {
  data() {
    return {
      // blog数据
      blogsData: [],
      // 日期范围数据
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
      currentPage1: 1,
      pageSizeArr: [10, 20, 40, 80],
      pageSize:10,
      total: 0,
      author: ""
    };
  },
  methods: {
    //   获取blogs
    async getBlogs(data) {
      await getBlogs(data)
        .then(res => {
          this.blogsData = res.data.blogs;
          this.total = res.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    formatter(row, column) {
      return row.address;
    },
    async handleSizeChange(val) {
      this.currentPage1 = 1;
      this.pageSize = val
      this.pageSizeArr = [val, 5, 10, 20, 40, 80];
      const data = {
        pageSize: val,
        pageNum: this.currentPage1,
        author: this.author,
        'date':this.value2
      };
      await this.getBlogs(data);
    },
    async handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
      const data = {
        pageSize: this.pageSize,
        pageNum: val,
        author: this.author,
        'date':this.value2
      };
      console.log(data);
      await this.getBlogs(data);
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    async handleDelete(index, row) {
      this.$confirm(`此操作将永久删除该文件, 是否删除?-${row.title}`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const data = { blogId: row.id, isdel: row.isdel };
          await delBlog(data).then(async res => {
            if (res.data.code == 200) {
              const data = { author: this.author, pageSize: this.pageSize, pageNum: this.currentPage1,'date':this.value2 };
              await this.getBlogs(data);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async sureDate(){
      console.log(1);
        const data = { author: this.author, pageSize: this.pageSize, pageNum: this.pageNum,'date':this.value2 };
        await this.getBlogs(data);
    }
  },

  async mounted() {
    const userInfo = localStorage.getItem("userInfo");
    const userInfoObj = JSON.parse(userInfo);
    this.author = userInfoObj.username;
    const data = { author: this.author, pageSize: this.pageSize, pageNum: this.currentPage1, 'date':this.value2};
    await this.getBlogs(data);
  }
};
</script>
<style lang="less" scoped>
.block {
  position: relative;
  margin-left: 80px;
  margin-top: -30px;
}
.blogSys {
  height: 80vh;
}
.blogForm {
  height: 70vh;
  overflow: auto;
}
.blogFace {
  width: 80px;
  height: 40px;
}
</style>